<template>
  <div class="card">
    <h2 class="title"></h2>
    <div class="subtitle"></div>
    <div class="content"></div>
    <div class="action">
      <!-- 定义一个插槽 -->
      <!-- 插槽的默认内容，只有没有提供内容时，才会显示 -->
      <slot>卡片功能区域</slot>
    </div>
  </div>
</template>

<style scoped>
.card {
  width: 250px;
  border: 1px solid black;
}

.card h2,
.card div {
  margin: 10px;
  padding: 5px;
}

.title {
  border: 1px solid red;
}

.subtitle {
  border: 1px solid green;
}

.content {
  border: 1px solid blue;
}

.action {
  border: 1px solid pink;
}
</style>
